<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <!-- import CSS -->
  <link rel="stylesheet" href="../js/3rd/elementUi/index.css">
  <link rel="stylesheet" href="../css/pc.css">
  <script src="../js/3rd/elementUi/vue.js"></script>
  <script src="../js/3rd/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div id="requirementsList" class="project-lists user-lists" style="display:none"> 
    
  <el-container>
    <el-aside class="sider-bar" id="siderbar">
      <div class="logo"><img src="../image/logo.jpg">来赚吧管理后台</div> 
      <tp-siderbar title="发布项目"></tp-siderbar>
    </el-aside>
    <el-main>
    <div class="right-content">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="bread-bd">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>项目列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="user-teb">
        <el-tabs  v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="需求" name="first">需求</el-tab-pane>
          <el-tab-pane label="申请合作" name="second">申请合作</el-tab-pane>
        </el-tabs>
        <div class="search-l">
          <el-input placeholder="请输入搜索手机号" size="medium" v-model="telephoneNum" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchByTelephone"></el-button>
          </el-input>
        </div>
      </div>

      <template>
        <el-table
          :data="requirementsData"
          style="width: 100%">
          <el-table-column
            label="编号"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="手机号"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.status|status }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            label="备注(标题，内容)"
            width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>标题: {{ scope.row.title }}</p>
                <p>联系方式: {{ scope.row.contact}}</p>
                <p>内容: {{ scope.row.content}}</p>    
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">查看备注详情</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleCheckUser(scope.$index, scope.row)">编辑</el-button>              
            </template>
          </el-table-column>
        </el-table>
      </template> 
      
      <el-pagination
        :page-size="20"

        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="totalCount">
      </el-pagination>
      <div class="clearfix"></div>
    </div>  
   </el-main>  
  </el-container>

  <el-dialog title="请审核状态" :visible.sync="dialogFormVisible">
    <el-form >
      <el-form-item label="审核状态" :label-width="formLabelWidth">
        <el-select v-model="selectStatusVal" placeholder="请选择目前状态">
          <el-option label="受理" value="2"></el-option>
          <el-option label="驳回" value="9"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitHandleCheckUser()">确 定</el-button>
    </div>
  </el-dialog>

  </div>
</body>


  <!-- import JavaScript -->
  <script src="../js/3rd/elementUi/index.js"></script>
  <script src="../js/js/admin_siderbar.js"></script>
  <script src="../js/js/common.js"></script>
  <script>
   var token=getCookie("userToken");
   var userId=getCookie("userId");

   if(!token||!userId){
      window.location.href = "/admin/login.html";
   }
  
  var url=window.location.hash;
  var projectId=url.split("#")[1];
  console.log(token)

    new Vue({
      el: '#requirementsList',
      data: {
        requirementsData:[],
        selectStatusVal:'',
        selectRowContent:'',
        selectIndex:'',
        dialogFormVisible:false,
        formLabelWidth: '120px',
        isDoingSubmitHandle:false,
        page:1,
        currentTab:1,
        telephoneNum:'',
        totalCount:null,
        activeName: 'first'
      },
      created:function(){
         var getRequirementsDataUrl="/requirement/getRequirements ";
         var data={
                   category:this.currentTab,
                   token: token,
                   userId: parseInt(userId),
                   client: 3,
                   page:this.page,
                   size:20,
                   telephone:this.telephoneNum
         }
         pushData(getRequirementsDataUrl,data,function(res){
             console.log(res)
             if(res.errorCode=="008"){
               window.location.href = "/admin/login.html";
             }
             this.requirementsData=res.data.requirements;
             this.totalCount=parseInt(res.data.totalCount);
         }.bind(this))
         $('#requirementsList').show()
      },
      filters:{
        type: function (key) {
            key = parseInt(key);
            var map = {
                1: "支付宝",
                2: "微信",      
            };
            return map[key];
        },
        status: function (key) {
            key = parseInt(key);
            var map = {
                1: "申请中",
                2: "平台已受理",  
                9: "平台拒绝",      
            };
            return map[key];
        }
      },
      methods:{
      
          handleCheckUser:function(index,row){
            console.log(index);
            console.log(row);
            this.dialogFormVisible=true;
            this.selectRowContent=row;
            this.selectIndex=index;
            
          },  
          submitHandleCheckUser:function(){
            if(this.isDoingSubmitHandle){
              return ;
            }
            this.isDoingSubmitHandle=true;
            if(this.selectStatusVal==2){
              var url="/requirement/check ";
              var data={
                client: 3,
                id: parseInt(this.selectRowContent.id),
                status: this.selectStatusVal,
                token: token,
                userId: parseInt(userId)
               }
              pushData(url,data,function(res){
                this.isDoingSubmitHandle=false;
                if(res.state){
                  console.log(res);
                  this.requirementsData[this.selectIndex].status=this.selectStatusVal;
                  this.dialogFormVisible=false;
                }else{
                  alert(res.message)
                }
              }.bind(this))

            }else if(this.selectStatusVal==9){
              var url="/requirement/deleteRequirement ";
              var data={
                client: 3,
                id: parseInt(this.selectRowContent.id),
                status: this.selectStatusVal,
                token: token,
                userId: parseInt(userId)
               };

              pushData(url,data,function(res){
                this.isDoingSubmitHandle=false;
                if(res.state){
                  console.log(res);
                  this.requirementsData.splice(this.selectIndex,1);
                  this.dialogFormVisible=false;
                }else{
                  alert(res.message)
                }
              }.bind(this))
            }
            
          },
          /*tab默认展示第一页*/
          handleClick:function(tab, event){
               this.currentTab=this.getUserCategory(tab);
               var getRequirementsDataUrl="/requirement/getRequirements";
               var data={
                         category:this.currentTab,
                         token: token,
                         userId: parseInt(userId),
                         client: 3,
                         page:1,
                         size:20,
                         telephone:''
               }
               console.log(data)
               pushData(getRequirementsDataUrl,data,function(res){
                   console.log(res)
                   this.requirementsData=res.data.requirements;
                   this.totalCount=parseInt(res.data.totalCount);
                   console.log(this.totalCount)
               }.bind(this))
          },
          searchByTelephone:function(){
               var getRequirementsDataUrl="/requirement/getRequirements";
               var data={
                         category:this.currentTab,
                         token: token,
                         userId: parseInt(userId),
                         client: 3,
                         page:this.page,
                         size:20,
                         telephone:this.telephoneNum
               }
               console.log(data)
               pushData(getRequirementsDataUrl,data,function(res){
                   console.log(res)
                   this.requirementsData=res.data.requirements;
                   this.totalCount=parseInt(res.data.totalCount);
               }.bind(this))
          },
          /*分页*/
          handleCurrentChange:function(val){
               console.log(val);
               var getRequirementsDataUrl="/requirement/getRequirements";
               this.page=val;
               var data={
                         category:this.currentTab,
                         token: token,
                         userId: parseInt(userId),
                         client: 3,
                         page:val,
                         size:20,
                         telephone:this.telephoneNum
               }
               //console.log(data)
               pushData(getRequirementsDataUrl,data,function(res){
                   console.log(res)
                   this.requirementsData=res.data.requirements;
                   this.totalCount=parseInt(res.data.totalCount);
               }.bind(this))
          },
          getUserCategory:function(category){
              if(category.label=="需求"){
                return 1;
              }else if(category.label=="申请合作"){
                return 2;
              }
          }

        }

      
    })
  </script>
</html>